<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" style="margin-left:20px; margin-top:30px">
      <el-form-item label="店铺名称">
        <el-col :span="12">
          <el-input v-model="form.name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="开店时间">
        <el-col :span="12">
          <el-time-picker
            is-range
            v-model="open_time"
            range-separator="至"
            start-placeholder="营业开始时间"
            end-placeholder="营业结束时间"
            placeholder="选择时间范围"
          ></el-time-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="头像">
        <upload :fileList="avatar" :limit="1" ref="avatar"></upload>
      </el-form-item>
      <el-form-item label="Banner">
        <upload :fileList="banner" :limit="2" ref="banner"></upload>
      </el-form-item>
      <el-form-item label="联系人">
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="form.contact_name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-col :span="12">
          <el-input placeholder="请输入内容" v-model="form.contact_phone"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="地址">
        <el-col :span="12">
          <el-input placeholder="请选择地址" disabled v-model="form.full_address">
            <el-button slot="append" icon="el-icon-location" @click="showBox = true"></el-button>
          </el-input>
        </el-col>
      </el-form-item>

      <el-form-item label="其他">
        <el-col :span="12">
          <div class="tags">
            <!-- <el-tag>平均价格: {{form.avg_price}} 元</el-tag> -->
            <el-tag>快递费: {{form.freight}} 元</el-tag>
          </div>
        </el-col>
      </el-form-item>

      <el-form-item label="描述">
        <el-col :span="18">
          <avue-ueditor v-model="form.description"></avue-ueditor>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">更新</el-button>
      </el-form-item>
    </el-form>

    <!-- 地图控件 -->
    <address-map
      ref="addressMap"
      :box="showBox"
      :mapResult="mapResult"
      @close="handleMapCLose"
      @confirm="handleMapConfirm"
    ></address-map>
  </div>
</template>

<script>
/* eslint-disable */
import { mapGetters } from "vuex";
import crudMixin from '@/mixins/crud'
import { isNull, arr2pojo, obj2pojo, validateResponse } from "@/util/util";
import { successMsg, errorMsg } from "@/util/message";
import { field, reField } from "./field";
import upload from '@/views/merchant/common/upload'
import addressMap from '@/views/merchant/common/address'
import moment from 'moment';

const DIC = {
  YoN: [{
    label: '否',
    value: 0
  }, {
    label: '是',
    value: 1
  }]
}

export default {
  name: "role",
  mixins: [crudMixin],
  components: {
    upload, addressMap
  },
  data() {
    return {
      form: {},
      avatar: [],
      banner: [],
      showBox: false,
      mapResult: {},
      open_time:''
    }
  },
  created() {
    //初始化
    this.handleShow()
  },
  methods: {
    submit() {

      this.form.avatar = this.$refs.avatar.result
      this.form.banner = this.$refs.banner.result
      this.form.opening_time = moment(this.open_time[0]).format('YYYY-MM-DD HH:mm:ss')
      this.form.close_time = moment(this.open_time[1]).format('YYYY-MM-DD HH:mm:ss')



      this.$store
        .dispatch("SetMerchantInfo", this.form)
        .then(
          res => {
            if (res.data.status == 1)            {
              return successMsg(this, '保存成功')
            }
            else            {
              return errorMsg(this, '保存失败')
            }
          }, error => {
            return errorMsg(this, '保存失败')
          })
    },
    handleShow() {
      this.$store
        .dispatch("GetMerchantInfo", {})
        .then(
          res => {
            if (res.data.status == 1)            {
              let _data = res.data.result.data || []
              this.form = _data
              this.filterForm(_data)
            }
          }, error => {

          })
    },
    filterForm(data) {
      this.avatar = this.filterImages(data.avatar)
      this.banner = this.filterImages(data.banner)

      if (!isNull(data.opening_time) && !isNull(data.close_time) )
      {
        this.open_time = [data.opening_time,data.close_time]
      }

      this.updateMapResult(data)

    },
    updateMapResult(data) {
      this.mapResult = {
        province: data.province,
        city: data.city,
        district: data.district,
        address: data.address,
        address_info: data.address_info,
        latitude: data.latitude,
        longitude: data.longitude,
      }
    },
    filterImages(data) {
      let images = data.split(',')
      let fileList = []
      images.forEach(item => {
        if (!(item.indexOf("tmp.jpg") >= 0))
        {
          fileList.push({ url: item })
        }
      })
      return fileList
    },
    handleMapCLose() {
      this.showBox = false;
    },
    handleMapConfirm() {
      let address = this.$refs.addressMap.result
      this.form.province = address.province
      this.form.city = address.city
      this.form.district = address.district
      this.form.latitude = address.latitude
      this.form.longitude = address.longitude
      this.form.full_address = address.full_address
      this.form.address = address.address
      this.form.address_info = address.address_info

      console.log(this.form)

      this.updateMapResult(address)
    }
  }
}
</script>

<style>
.tags span {
  margin-right: 20px;
}
</style>

